import React, { Component } from 'react';
import { View, Animated, Easing, Text } from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';

//跑马灯组件
export default class MarqueeLabel extends Component {
    state = {
        textWidth: 0,
        textHeight: 0,
        bgViewWidth: 0,
        duration: 0,
        text: '',
        animation: null
    };

    componentWillMount() {
        this.setState({
            text: this.props.text || this.props.children || ''
        })
        this.animation = null
        this.animatedTransformX = new Animated.Value(0);
    }

    componentWillUnmount() {
        if (this.state.animation !== null) {
            this.state.animation.stop()
        }
    }

    componentWillReceiveProps(nextProps) {
        // let newText = nextProps.text || nextProps.children || '';
        // let oldText = this.props.text || this.props.children || '';
        // if (newText !== oldText) {
        //     this.state.animation.stop();
        //     this.setState({
        //         text: newText,
        //         textWidth: 0,
        //         textHeight: 0,
        //         duration: 0,
        //         animation: null
        //     });
        // }
    }

    componentDidUpdate(prevProps, prevState) {
        let { textWidth, bgViewWidth, duration, animation } = this.state;

        if (duration === 0) {
            if (textWidth === 0 || bgViewWidth === 0) { return }

            const { duration, speed } = this.props;
            if (duration !== undefined) {
                this.setState({
                    duration: duration
                });
            } else if (speed !== undefined) {
                this.setState({
                    duration: ((bgViewWidth + textWidth) / speed) * 1000
                });
            }
        } else {
            if (animation === null) {
                this.animatedTransformX.setValue(bgViewWidth);
                this.setState({
                    animation: Animated.timing(this.animatedTransformX, {
                        toValue: -textWidth,
                        duration: duration,
                        useNativeDriver: true,
                        easing: Easing.linear
                    })
                }, () => {
                    this.state.animation.start(() => {
                        this.setState({
                            animation: null
                        })
                    })
                })
            }
        }
    }

    textOnLayout(e) {
        this.setState({
            textWidth: e.nativeEvent.layout.width,
            textHeight: e.nativeEvent.layout.height
        });
    }

    bgViewOnLayout(e) {
        this.setState({
            bgViewWidth: e.nativeEvent.layout.width
        });
    }

    render() {
        const {
            bgViewStyle, // Background View Custom Styles
            textStyle, // Text Custom Styles

            // Text Container Width: 
            // to make the text shown in one line, this value should be larger than text width
            textContainerWidth = 1000,

            // Text Container Height: 
            // to make the text shown in one line, this value should be larger than text height
            // usually increase this value when text has a large font size.
            textContainerHeight = 100,

            textContainerStyle // Text Container Custom Styles, not recommended to use
        } = this.props;

        const { textWidth, textHeight, text, animation } = this.state;

        return (
            <View
                style={{ ...styles.bgViewStyle, ...bgViewStyle }}
                onLayout={(event) => this.bgViewOnLayout(event)}
            >
                <View
                    style={{
                        ...styles.textContainerStyle,
                        width: textContainerWidth,
                        height: textContainerHeight,
                        opacity: animation === null ? 0 : 1, // Make sure the view only shows when it's animating
                        ...textContainerStyle
                    }}
                >
                    <Animated.Text
                        style={{
                            fontSize: 20,
                            transform: [{ translateX: this.animatedTransformX }],
                            width: textWidth,
                            height: textHeight,
                            ...textStyle
                        }}
                    >
                        {text}
                    </Animated.Text>
                </View>
                <Text
                    style={{
                        ...styles.textSizeMeasuringViewStyle,
                        ...textStyle
                    }}
                    onLayout={(event) => this.textOnLayout(event)}
                >
                    {text}
                </Text>
            </View>
        );
    }
}

const styles = {
    bgViewStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        overflow: 'scroll',
    },
    textContainerStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    textSizeMeasuringViewStyle: {
        opacity: 0,
        fontSize: 20
    }
};
